<template>
	<view class="refundReason">
		<n-loading></n-loading>
		<view v-if="orderInfo">
			<view class="reason-top" v-for="(item,index) of orderInfo.items" :key="index">
				<!-- <img :src="item.image"> -->
				<dh-image class="niccImg" :src="item.image" errorSrc="https://lovebirdopen.com/static/img/cBj/dPicture.png"></dh-image>
				<view class="reason-top-name">
					<view class="name ellipsis">{{item.name}}</view>
					<view class="type">{{orderInfo.products[0].specs}}</view>
				</view>
				<!-- <view class="reason-price">￥{{item.price}}</view> -->
			</view>
			<view class="reason-detail">
				<u-form :model="form" ref="uForm" label-width="140">
					<u-form-item label="退货原因"><u-input v-model="form.reason" type="select" @click="reasonShow=true"/></u-form-item>
					<u-form-item label="退款方式"><u-input v-model="form.type" :disabled="true"/></u-form-item>
					<u-form-item label="退款金额"><u-input v-model="form.price" style="color: #FF5238;" :disabled="true"/></u-form-item>
					<u-form-item label="退货说明"><u-input v-model="form.intro" /></u-form-item>
					<!-- <u-form-item label="上传照片(最多5张)"><u-upload ref="uUpload" :action="action" del-bg-color="#999" max-count="5" width="154rpx" height="154rpx"></u-upload></u-form-item> -->
				</u-form>
				<view class="imgTips mt28">上传照片(选填)</view>
				<view class="imgTips">上传照片，最多5张</view>
				<view class="addImage">
					<view class="pImgageBox" v-for="(item,index) of imgList" :key="index">
						<view class="close" :data-index="index" @tap="deleteImg">
							<u-icon size="40" name="close-circle-fill" color="#666"></u-icon>
						</view>
						<image class="pImgage" :src="item"></image>
					</view>
					<!-- <u-upload :action="action" :file-list="fileList" ></u-upload> -->
					<view class="addBtn" @tap="addImages">
						<view class="addBtnIcon"><u-icon name="camera" color="#999999" size="24"></u-icon></view>
						<view class="addBtnTips">上传凭证</view>
					</view>
				</view>
			</view>
			<!-- 退货提示 -->
			<!-- <view class="returnTips">商品或订单发生争议时，建议您及时对有问题商品进行拍照并保存与商家聊天记录，方便日后进行争议处理</view> -->
			<!-- 按钮 -->
			<view class="handleBox" :style="{paddingBottom:isIphoneX?'40rpx':''}">
				<!-- <button class="reclose" @tap="">取消</button> -->
				<button class="remind" @tap="submitReason()">提交</button>
			</view>
		</view>
		
		<u-select v-model="reasonShow" :list="reasonList" @confirm="confirm"></u-select>
	</view>
</template>

<script>
	export default{
		data() {
			return{
				// 手机机型
				modelmes:null,
				isIphoneX:false,
				orderInfo:null,
				order_id:null,
				form: {
					type: '退回原账户',
					reason: '',
					price:null,
					intro:'',
				},
				reasonShow:false,
				reasonList: [],
				imgList:[],
			}
		},
		onLoad: function (option) {
			// 判断机型iPhone X的
			this.modelmes = uni.getStorageSync('modelmes');
			if (this.modelmes.search('iPhone X') != -1) {
			   this.isIphoneX = true;
			}
			this.order_id = option.id;
			this.getOrderInfo(option.id);
			this.getReason();
		},
		methods:{
			getOrderInfo(id){
				this.apiget('/fun/order/view',{id:id}).then(res =>{
					if(res.data.status == 200 ) {
						this.orderInfo = res.data.data;
						this.form.price = res.data.data.refund;
					}
				})
			},
			getReason(){
				// type 类型 1退款 2退货 3退卡
				var _this = this;
				this.apiget('/fun/bill-aftersales-reason/index',{type:2}).then(res =>{
					if(res.data.status == 200 ) {
						var list = res.data.data.list;
						list.forEach(v => {
							var eachObj = {};
							eachObj.value = v.id;
							eachObj.label = v.reason;
							_this.reasonList.push(eachObj);
						})
					}
				})
			},
			confirm(e) {
				this.form.reason = e[0].label
			},
			// 上传图片
			addImages(){
				var _this = this;
				if(_this.imgList.length==5){
					uni.showToast({
						icon: 'none',
						duration:1000,
						title: '最多只能上传5张图片'
					});
					return false;
				}
				uni.chooseImage({
					count:5-_this.imgList.length,
				    success: (chooseImageRes) => {
				        const tempFilePaths = chooseImageRes.tempFilePaths;
						tempFilePaths.forEach(v => {
							_this.uploadImg('/public/fileupload',v).then(res =>{
								var data = JSON.parse(res.data)
								if(data.status == 200 ) {
									_this.imgList.push(data.data.file_url);
								}
							})
						})
				    }
				});
			},
			// 删除图标
			deleteImg(e){
				var _index = e.currentTarget.dataset.index;
				this.imgList.splice(_index, 1);
			},
			submitReason() {
				if(this.form.reason == ''){
					uni.showToast({
						icon: 'none',
						duration:1000,
						title: '请选择退货原因'
					});
					return false;
				}
				this.apipost('/fun/bill-aftersales/create',{order_id:this.order_id,type:2,refuse_msg:this.form.reason,user_mark:this.form.intro,images:this.imgList}).then(res =>{
					if(res.data.status == 200 ) {
						uni.showToast({
							icon: 'success',
							duration:1000,
							title: '申请成功',
							success: res => {
								setTimeout(function (){
									uni.navigateBack({
									    delta: 1
									});
									// uni.navigateTo({
									// 	url: '../order/order?tab=0'
									// });
								}, 1000);
							},
						});
					}
				})
				// uni.navigateTo({
				// 	url:'./refundResult'
				// })
			}
		}
	}
</script>

<style lang="scss">
	.refundReason{
		background: #f5f5f5;
		width: 100%;
		height: 100%;
		.reason-top{
			width: 100%;
			height: 160rpx;
			padding: 24rpx 32rpx;
			background-color: #fff;
			display: flex;
			
			img{
				width: 116rpx;
				height: 116rpx;
				border-radius: 8rpx;
				margin-right: 32rpx;
			}
			
			.niccImg{
				width: 116rpx;
				height: 116rpx;
				border-radius: 8rpx;
				margin-right: 32rpx;
			}
			
			.reason-top-name{
				// width: 60%;
				flex: auto;
				width: 1px;
				height: 90rpx;
				padding-top: 12rpx;
				.name{
					color: #333333;
					font-size: 32rpx;
					
				}
				.type{
					color: #999999;
					font-size: 24rpx;
				}
			}
			.reason-price{
				display: block;
				color: #333333;
				font-size: 32rpx;
				line-height: 90rpx;
			}
		}
		.reason-detail{
			width: 100%;
			background: #fff;
			// min-height: 668rpx;
			padding: 24rpx 32rpx;
			margin-top: 16rpx;
			
			.mt28{
				margin-top: 28rpx;
			}
			.imgTips{
				font-size: 28rpx;
				line-height: 36rpx;
				color: #666666;
			}
			
			.addImage{
				display: flex;
				flex-wrap:wrap;
				// justify-content:space-between;
				margin-top: 28rpx;
				
				.pImgageBox{
					position: relative;
					margin: 0 16rpx 16rpx;
					
					.close{
						position: absolute;
						top: -18rpx;
						right: -18rpx;
						z-index: 1;
						height: 40rpx;
						width: 40rpx;
						font-size: 0;
						background-color: #fff;
						border-radius: 50%;
					}
				}
				.pImgage{
					width: 124rpx;
					height: 124rpx;
				}
				.addBtn{
					// display: flex;
					// align-items: center;
					// justify-content: center;
					width: 124rpx;
					height: 124rpx;
					margin: 0 16rpx 16rpx;
					text-align: center;
					background: #F8F8FA;
					border-radius: 8rpx;
					
					.addBtnIcon{
						margin-top: 20rpx;
						width: 100%;
					}
					
					.addBtnTips{
						font-size: 24rpx;
						line-height: 36rpx;
						color: #666;
					}
				}
			}
		}
		
		.returnTips{
			padding: 24rpx 32rpx;
			font-size: 28rpx;
			line-height: 40rpx;
			color: #FF9333;
			background: #FFF4EB;
		}
		
		.handleBox{
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			padding: 18rpx 32rpx;
			text-align: right;
			background-color: #fff;
			
			button{
				background-color: inherit;
				display: inline-block;
				height: 60rpx;
				padding: 0 40rpx;
				margin-right: 16rpx;
				color: #666666;
				font-size: 24rpx;
				line-height: 60rpx;
				box-sizing: border-box;
				border-radius: 30rpx;
				border: 2rpx solid #999999;
				
			}
			.remind{
				width: 100%;
				background: #FF5238;
				color: #fff;
				border: none;
			}
			.reclose{
				color: #666666;
				width: 30%;
				background-color: #fff;
				border: 2rpx solid #e4e7ed;
			}
		}
	}
</style>
